<template>
  <div class="home">
    <van-nav-bar title="交通转运" />
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-card
        v-for="(item, index) in list"
        @click="trafficTransshipInfo(item)"
        :key="index"
      >
        <template #tags>
          <van-row style="margin-top: 0.25rem">
            <van-col span="12">
              <van-tag type="primary" size="large">
                <!-- 任务编码：{{ item.taskNo }} -->
                转运司机：{{ item.transportDriverName }}
              </van-tag>
            </van-col>
            <van-col span="12">
              <van-tag type="danger" size="large">
                管控方式：{{ item.taskType | taskTypeFilter }}
              </van-tag>
            </van-col>
          </van-row>
          <van-divider />

          <van-row style="padding-top: 0.35rem; font-size: large">
            <van-col span="24"
              >始发地联系人：{{ item.startAddressContact }}</van-col
            >
            <van-col
              span="24"
              style="margin-top: 0.25rem; margin-bottom: 0.25rem"
              >始发地电话：{{ item.startAddressTel }}</van-col
            >
            <van-row>
              <van-col>始发地址：{{ item.startAddress }}</van-col>
            </van-row>
          </van-row>

          <van-divider />

          <van-row style="padding-top: 0.35rem; font-size: large">
            <van-col span="24"
              >目的地联系人：{{ item.destinationContact }}</van-col
            >
            <van-col
              span="24"
              style="margin-top: 0.25rem; margin-bottom: 0.25rem"
              >目的地电话：{{ item.destinationTel }}</van-col
            >
            <van-row>
              <van-col>目的地地址：{{ item.destinationAddress }}</van-col>
            </van-row>
          </van-row>

          <van-divider />
        </template>

        <template #footer>
          <!-- <van-row style="padding-top: 0.35rem; font-size: large">
            <van-col offset="14">转运司机：{{ item.transportDriverName }}</van-col>
          </van-row> -->

          <van-row style="margin-top: 0.25rem; margin-bottom: 0.25rem">
            <van-col offset="14">
              <van-tag type="warning" size="large">
                <span style="font-size: large">
                  状态：{{ item.taskStatus | taskStatusFilter }}</span
                ></van-tag
              >
            </van-col>
          </van-row>
        </template>
      </van-card>

      <van-cell />
    </van-list>
  </div>
</template>

<script>
import { trafficTransshipList } from '@/api/traffic/traffic'
import { Toast, Dialog } from 'vant'
export default {
  data () {
    return {
      page: 0, // 页数
      totalPage: null, // 全部条数
      loading: false,
      finished: false,

      list: []
    }
  },
  mounted () {
    // this.onLoad()
  },
  filters: {
    taskStatusFilter (val) {
      if (val == '0') {
        return '未开始'
      } else if (val == '1') {
        return '进行中'
      } else if (val == '2') {
        return '已完成'
      } else if (val == '3') {
        return '已取消'
      }
    },
    taskTypeFilter (val) {
      if (val == '0') {
        return '居家隔离'
      } else if (val == '1') {
        return '集中隔离'
      } else if (val == '2') {
        return '医院治疗'
      }
    }
  },
  methods: {
    onLoad () {
      this.page++
      this.getList()
    },
    getList () {
      //  this.timer = window.setInterval(() => {  }, 5000) //30000
      trafficTransshipList({
        transportDriver: localStorage.getItem('driverId'),
        pageNo: this.page,
        pageSize: 10
      }).then((res) => {
        setTimeout(() => {
          // this.list = this.list.concat(res.data.data.results)
          // this.totalPage = res.data.data.totalPage
          this.list = res.data.data
          this.loading = false
          this.finished = true
          // if (this.page >= this.totalPage) {
          //   this.finished = true
          // }
        }, 400)
      })
    },
    trafficTransshipInfo (item) {
      let row = item
      this.$router.push({
        name: 'traffic_transship_info',
        query: {
          type: 'detail',
          id: row.id
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
// .home {
//  background: url('../../assets/images/smtb.jpg') no-repeat;
// }

.home .blue {
  background-color: transparent;
}
.home .van-cell {
  background-color: transparent;
}
.van-card {
  font-size: 0.75rem;
  border-radius: 15px;
  // border-radius: 10%;
  // background-color:grey ;
}
</style>
